<template>
	<view class="editmyinfo">
		<view class="display_flex" style="justify-content: center;">
			<view class="avatar_box">
				<button v-if="userinfo.audit_avatar_status==1||userinfo.audit_avatar_status==2"
					class="weui-cell weui-memberinfo avatar_btn" open-type="chooseAvatar"
					@chooseavatar="bindchooseavatar">
					<image class="avatar"
						:src="userinfo.audit_avatar?picUrl+userinfo.audit_avatar:onlinePic+'avatar.png'"
						mode="aspectFill">
					</image>
					<image v-if="userinfo.avatar_border" class="my_avatar_border" :src="picUrl+userinfo.avatar_border">
					</image>
				</button>
				<button v-else class="weui-cell weui-memberinfo avatar_btn" open-type="chooseAvatar"
					@chooseavatar="bindchooseavatar">
					<image v-if="userinfo.avatar" class="avatar"
						:src="userinfo.wx_avatar?picUrl+userinfo.wx_avatar:picUrl+userinfo.avatar" mode="aspectFill">
					</image>
					<image v-else class="avatar"
						:src="userinfo.wx_avatar?picUrl+userinfo.wx_avatar:onlinePic+'avatar.png'" mode="aspectFill">
					</image>
					<image v-if="userinfo.avatar_border" class="my_avatar_border" :src="picUrl+userinfo.avatar_border">
					</image>
				</button>
			</view>
		</view>
		<view class="f-14 mt-5 text-c">点击更改头像</view>
		<view v-if="userinfo.audit_avatar_status!=0&&userinfo.audit_avatar_text" class="f-12 mt-5 c-red text-c">
			{{userinfo.audit_avatar_text}}
		</view>
		<view class="nickname_box">
			<view class="">选择头像框</view>
		</view>
		<view class="avatar_border_cell_box">
			<uni-row :gutter="20">
				<uni-col v-for="(item,index) in avatar_border_list" :key="item.pic" :span="8">
					<view class="avatar_border_cell" @click="changeAvatarBorder(item.id,item.pic,item.is_have)">
						<image class="avatar_border" :src="item.is_have==1?picUrl+item.pic:picUrl+item.pic_no"></image>
						<image v-if="item.is_use==1" class="check_avatar" :src="onlinePic+'check_avatar.png'"></image>
					</view>
				</uni-col>
			</uni-row>
		</view>
		<view class="nickname_box">
			<view class="">昵称</view>
			<input v-if="userinfo.audit_username_status==1||userinfo.audit_username_status==2" type="nickname"
				class="editmyinfo_input" placeholder="设置你的昵称" @input="changeName" v-model="userinfo.audit_username" maxlength="10" />
			<input v-else type="nickname" class="editmyinfo_input" placeholder="设置你的昵称" @input="changeName"
				v-model="userinfo.wx_username" maxlength="10" />
		</view>
		<view v-if="userinfo.audit_username_status!=0&&userinfo.audit_username_text" class="f-12 mt-5 c-red ml-15">
			{{userinfo.audit_username_text}}
		</view>
		<view class="nickname_box" style="align-items: flex-start;">
			<view class="mt-5">签名</view>
			<textarea class="editmyinfo_textarea" v-model="userinfo.desc" placeholder="设置个性签名"
				:disable-default-padding="true" @input="changeDesc" />
		</view>
		<view v-if="choosea||choosen||choosed" class="save_btn" @click="saveMemberInfo">保存</view>
	</view>
</template>

<script>
	import {
		getGroupUserInfo,
		saveMemberInfo,
		saveMemberInfoAudit,
		checkText
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				avatar_border_list: uni.getStorageSync('userinfo').avatar_border_list,
				userinfo: uni.getStorageSync('userinfo'),
				choosea: false,
				choosen: false,
				choosed: false,
				is_avatar_auth: 0,
				is_username_auth: 0,
				isHide: 0,
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
			};
		},
		onShow() {

		},
		onLoad() {
			this.getGroupUserInfo()
		},
		onHide() {
			console.log('-----editmyinfo--onHide----')
			this.isHide = 1
		},
		methods: {
			bindchooseavatar(e) {
				var that = this
				if (that.isHide == 1) {
					that.is_avatar_auth = 0
				} else {
					that.is_avatar_auth = 1
				}
				console.log('-----bindchooseavatar----')
				console.log(e)
				uni.uploadFile({
					url: app.globalData.uploadUrl,
					filePath: e.detail.avatarUrl,
					name: 'img',
					success: (uploadFileRes) => {
						that.isHide = 0
						console.log('-----isUpload----' + that.isUpload)
						that.choosea = true
						console.log(JSON.parse(uploadFileRes.data));
						var picdata = JSON.parse(uploadFileRes.data);
						if (that.userinfo.audit_avatar_status == 0) {
							that.userinfo.wx_avatar = picdata.data.img
						} else {
							that.userinfo.audit_avatar = picdata.data.img
						}
					}
				});
			},
			changeName(e) {
				console.log(e)
				if (e.detail.keyCode) {
					this.is_username_auth = 0
				} else {
					this.is_username_auth = 1
				}
				this.choosen = true
				this.userinfo.audit_username = e.detail.value
			},
			changeDesc() {
				this.choosed = true
			},
			changeAvatarBorder(id, pic, is_have) {
				if (is_have == 1) {
					if (pic != this.userinfo.avatar_border) {
						this.userinfo.avatar_border = pic
						this.userinfo.border_id = id
					}
				}
			},
			saveMemberInfo() {
				var audit_username = this.choosen ? this.userinfo.audit_username : ''
				var is_username_auth = this.choosen ? this.is_username_auth : ''
				if (this.choosea) {
					var is_avatar_auth = this.choosea ? this.is_avatar_auth : ''
					if (this.userinfo.audit_avatar_status == 0) {
						var audit_avatar = this.choosea ? this.userinfo.wx_avatar : ''
					} else {
						var audit_avatar = this.choosea ? this.userinfo.audit_avatar : ''
					}
				}
				var checktext = audit_avatar + this.userinfo.desc
				checkText({
					content: checktext,
				}).then(res => {
					if (res.state == 1) {
						console.log('is_username_auth==' + is_username_auth)
						saveMemberInfoAudit({
							is_username_auth: is_username_auth,
							audit_username: audit_username,
							is_avatar_auth: is_avatar_auth,
							audit_avatar: audit_avatar,
							border_id: this.userinfo.border_id,
							desc: this.userinfo.desc
						}).then(res => {
							if (res.state == 1) {
								uni.showToast({
									title: '保存成功',
									icon: 'success',
									mask: true,
									duration: 1500,
									success() {

									}
								})
								uni.setStorage({
									key: 'onload',
									data: 'true',
									success() {

									}
								})
								this.getGroupUserInfo()
							} else {

							}
						})
					} else {
						that.isSubmit = true
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						});
					}
				})
			},
			getGroupUserInfo() {
				getGroupUserInfo({
					user_id: this.userinfo.user_id
				}).then(res => {
					if (res.state == 1) {
						this.userinfo = res.data.list
						uni.setStorage({
							key: 'userinfo',
							data: res.data.list,
							success: function() {

							}
						});
					} else {
						uni.removeStorage({
							key: 'access_token'
						})
					}
				})
			},

		},
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;
	}

	.editmyinfo {
		padding-bottom: 50rpx;

		.avatar_box {
			width: 190rpx;
			height: 190rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			margin-top: 10%;

			button::after {
				border: none;
			}

			.avatar_btn {
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: transparent;
				text-align: center;
				font-size: 28rpx;
				font-weight: normal;
				position: relative;
				width: 190rpx !important;
				height: 190rpx;
				padding-left: 0 !important;
				padding-right: 0 !important;
			}

			.avatar {
				width: 152rpx;
				height: 152rpx;
				border-radius: 100%;
			}

			.my_avatar_border {
				width: 190rpx;
				height: 190rpx;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				z-index: 1;
			}
		}

		.avatar_border_cell_box {
			padding: 0 30rpx;
			margin-top: 20rpx;

			.avatar_border_cell {
				text-align: center;
				position: relative;

				.avatar_border {
					width: 126rpx;
					height: 129rpx;
				}

				.check_avatar {
					width: 27rpx;
					height: 19rpx;
					position: absolute;
					top: 55rpx;
					left: 0;
					right: 0;
					margin: 0 auto;
					z-index: 1;
				}
			}
		}

		.nickname_box {
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			font-size: 28rpx;
			margin-top: 60rpx;
		}

		.editmyinfo_input {
			flex: 1;
			margin-left: 20rpx;
			background-color: #fff;
			padding: 20rpx 30rpx;
			border-radius: 8rpx;
			border: 2rpx solid #E9E9E9;
		}

		.editmyinfo_textarea {
			height: 180rpx;
			flex: 1;
			margin-left: 20rpx;
			background-color: #fff;
			padding: 30rpx;
			border-radius: 8rpx;
			border: 2rpx solid #E9E9E9;
		}

		.save_btn {
			text-align: center;
			padding: 20rpx 0;
			margin: 0 10%;
			background: #00A0E1;
			color: #fff;
			border-radius: 8rpx;
			font-size: 28rpx;
			margin-top: 10%;
		}

		.save_btn_def {
			text-align: center;
			padding: 20rpx 0;
			margin: 0 10%;
			background: #eaeaea;
			color: #3a3a3a;
			border-radius: 8rpx;
			font-size: 28rpx;
			margin-top: 10%;
		}

	}
</style>